<template>
  <div class="tiktok-detail section" :class="{ 'w375': fun.isPc() }" v-if="show_page">
    <div id="navTab" :class="{ hoet: hoet }">
      <a class="nav1" :class="{ current: currentClass == 0 }" @click.stop="jump(0)">
        {{ isTimeAppiont ?
          `${appointmentLang.service}` : '商品'
        }}
      </a>
      <a class="nav1" :class="{ current: currentClass == 1 }" @click.stop="jump(1)">详情</a>
    </div>
    <div id="hoid" :class="{ hoet: hoet, 'w375': fun.isPc() }">
      <div class="back" @click="goto" :class="{ hoet: hoet }">
        <i class="iconfont icon-member-left"></i>
      </div>
      <div class="back" @click="gotoMember" :class="{ hoet: hoet }">
        <i class="iconfont icon-wode-wode"></i>
      </div>
    </div>


    <template v-if="aggregate_module_code == 1">
      <GoodsSwiper :thumb_url="detail.imgs || []" />
      <div class="tiktok-cps">
        <div style="display: flex; margin-bottom: 0.5rem;">
          <span style="color: #ff6238; font-size: 1.125rem;">{{ $i18n.t('money') }}{{ detail.coupon_price }}</span>
        </div>
        <div class="tiktok-cps-title">
          <span class="tiktok-tips">抖音</span>
          <span>{{ detail.title }}</span>
        </div>
        <div class="tiktok-cps-sell-good" v-if="detail.kol_num">
          <div class="tiktok-person">
            <img src="../../../assets/images/TikTok/jieti.png" style="width: 100%; height: 100%;" />
          </div>
          <div style="color: #999;">{{ detail.kol_num }}位达人带货</div>
        </div>
        <div class="tiktok-goods-info" v-if="detail.month_sales || detail.sales">
          <span v-if="detail.month_sales">月销{{ detail.month_sales }}</span>
          <span v-if="detail.sales">总销量{{ detail.sales }}</span>
        </div>
      </div>
      <!--单单有喜-->
      <goods-label :everyOrder="detail.every_order_reward" v-if="detail.every_order_reward"></goods-label>

      <div class="item">{{ detail.shop_name }}</div>

      <!--群活码-->
      <div class="group-code" v-if="detail.group_code && detail.group_code.goods_entrance == 1">
        <div class="group-code-face" v-if="detail.group_code.code_logo">
          <img :src="detail.group_code.code_logo" />
        </div>
        <div class="group-code-content">
          <div class="group-code-name">{{ detail.group_code.code_title }}邀请您添加专属福利群！</div>
          <div class="group-code-desc">{{ detail.group_code.citation_copy }}</div>
        </div>
        <div class="group-code-button" @click="toGroupCode">去加群</div>
      </div>




      <div class="section">
        <p class="good-detail">
          <span class="left-line"></span>
          商品详情
          <span class="right-line"></span>
        </p>
        <img v-for="item in detail.imgs" style="width: 100%; display: block;" :src="item" alt />
      </div>

      <div style="width: 375px; top: 450px; position: fixed;">
        <div class="poster" @click="postShow">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/bc_eweima.png" alt />
        </div>
      </div>

      <div class="foot" :class="{ 'w375 foot_pc': fun.isPc() }">
        <van-goods-action-icon icon="shop-o" text="首页" @click="gotoHome" />
        <van-goods-action-icon icon="chat-o" text="客服" @click="clickChat" />
        <div style="display: flex; justify-content: space-evenly; flex: 1; color: #fff; text-align: center;">
          <template v-if="dy_password && dy_deeplink">
            <div @click="ShowTiktokPoupup" class="button" style="opacity: 0.5;">
              <template v-if="detail.share_reward">
                <template v-if="detail.share_reward_type !== 'commission'">
                  <div>分享赚</div>
                  <div>{{ detail.share_reward }}</div>
                </template>
                <template v-else>
                  <div style="padding: 0.6rem 0;">分享赚{{ detail.share_reward }}</div>
                </template>
              </template>
              <template v-else>
                <div style="padding: 0.5rem 0;">分享</div>
              </template>
            </div>
            <div class="button" @click="toTikTok">
              <template v-if="detail.order_reward">
                <template v-if="detail.order_reward_type !== 'balance'">
                  <div>下单送</div>
                  <div>{{ detail.order_reward }}</div>
                </template>
                <template v-else>
                  <div style="padding: 0.6rem 0;">下单送{{ detail.order_reward }}</div>
                </template>
              </template>
              <template v-else>
                <div style="padding: 0.5rem 0;">下单</div>
              </template>
            </div>
          </template>
          <template v-else>
            <div class="button" style="background: rgb(212, 212, 212) !important;">
              <template v-if="detail.share_reward">
                <template v-if="detail.share_reward_type !== 'commission'">
                  <div>分享赚</div>
                  <div>{{ detail.share_reward }}</div>
                </template>
                <template v-else>
                  <div style="padding: 0.6rem 0;">分享赚{{ detail.share_reward }}</div>
                </template>
              </template>
              <template v-else>
                <div style="padding: 0.5rem 0;">分享</div>
              </template>
            </div>
            <div class="button" style="background: rgb(212, 212, 212) !important;">
              <template v-if="detail.order_reward">
                <template v-if="detail.order_reward_type !== 'balance'">
                  <div>下单送</div>
                  <div>{{ detail.order_reward }}</div>
                </template>
                <template v-else>
                  <div style="padding: 0.6rem 0;">下单送{{ detail.order_reward }}</div>
                </template>
              </template>
              <template v-else>
                <div style="padding: 0.5rem 0;">下单</div>
              </template>
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-else>
      <GoodsSwiper :thumb_url="detail.imgs || []" />
      <div class="contenBox">
        <!-- 价格 -->
        <div class="goodsPrice">
          <div style="display: flex;">
              <div class="goodsPrice_left">
                <span>￥</span><span class="goodsPrice_left_price">{{ detail.coupon_price }}</span>
              </div>
              <div class="goodsPrice_left_row" v-if="detail.price * 1> detail.coupon_price*1">
                <span>折后价</span>
                <span class="original">原价￥{{ detail.price }}</span>
              </div>
          </div>
          <div class="goodsPrice_right">
            <span>已售 {{ detail.month_sales || 0 }}</span>
          </div>
        </div>
        <!-- 商品名称 -->
        <div class="goodsDetail">
          <div class="goodsDetail_left">
            <div class="shopType bc-f15353">{{ aggregate_module_code == 2 ? '淘宝' :
              aggregate_module_code == 3 ? '京东' : aggregate_module_code == 4 ? '拼多多' : '唯品会' }}</div>
            <span>{{ detail.title }}</span>
          </div>
        </div>


      </div>
      <!-- 优惠券 -->
      <div class="couponBox" v-if="coupon_info.coupon > 0">
        <div class="dor">￥</div>
        <span class="couponBox_price">{{ coupon_info.coupon }}</span>
        <div style="margin-left: 0.44rem;">
          <div style="text-align: left;">优惠券</div>
          <div class="time">{{ coupon_info.coupon_start_time }}~{{ coupon_info.coupon_end_time }}</div>
        </div>
        <div class="couponRight" @click="getCoupon">立即领券</div>
      </div>

      <!-- 门店 -->
      <div class="storeIn" v-if="aggregate_module_code == 4">
        <div class="store_left" v-if="detail.shop_name">
          <img :src="detail.mall_img_url" alt="" />
        </div>
        <div class="store_right">
          <div class="storeName">
            <span>{{ detail.shop_name }}</span>
          </div>
          <div class="evaluate" v-if="detail.serv_txt">
            <div>
              宝贝描述 <span style="color: #ff2424;">{{ detail.desc_txt }}</span>
            </div>
            <div>
              卖家服务 <span style="color: #ff2424;">{{ detail.serv_txt }}</span>
            </div>
            <div>
              物流服务 <span style="color: #ff2424;">{{ detail.lgst_txt }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="group-code" v-if="detail.group_code && detail.group_code.goods_entrance == 1">
        <div class="group-code-face" v-if="detail.group_code.code_logo">
          <img :src="detail.group_code.code_logo" />
        </div>
        <div class="group-code-content">
          <div class="group-code-name">{{ detail.group_code.code_title }}邀请您添加专属福利群！</div>
          <div class="group-code-desc">{{ detail.group_code.citation_copy }}</div>
        </div>
        <div class="group-code-button" @click="toGroupCode">去加群</div>
      </div>

      <div class="reward-box" v-if="detail.rewards && detail.rewards.length !== 0">
        <div class="reward-title">
          <span class="reward-tips">奖励信息&nbsp;</span>
          <span class="reward-title-right">(预估奖励，实际奖励以最终返回结果为准)</span>
          <img :src="imgHost" />
        </div>
        <div class="reward-content">
          <div class="flex-center mb-24" v-for="item in detail.rewards">
            <span class="reward-content-left">{{ item.reward_type }}</span><span>{{ item.value }}</span>
          </div>
        </div>
      </div>

      <!-- 详情 -->
      <div class="describe">
        <div class="describe_top">
          <span>宝贝描述</span>
          <div class="describe_top_r" @click="toShowContent">
            {{ showContent ? "收起" : "展开" }}
            <van-icon name="arrow-up" v-if="showContent" />
            <van-icon name="arrow-down" v-if="!showContent" />
          </div>
        </div>
        <div class="content" v-if="showContent">
          <img v-for="(img, i) in detail.detail_pictures" :key="i" :src="img" alt="" />
        </div>
      </div>

      <!-- 下单导航 -->
      <div class="orderNav set-pc-styleLeft">
        <div class="leftNav">
          <div class="leftNav_min" @click="gotoUrl('home')">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cps/icon-xiaoxi@2x@2x.png" alt="" />
            首页
          </div>
        </div>
        <div class="btnAR">
          <div class="orderNav_left" @click="shareWeixin">
            <div class="orderNav_left_top">立即分享</div>
          </div>
          <div class="orderNav_right" @click="getCoupon" v-if="!isWeixin">
            <div class="orderNav_right_top">{{ coupon_info.coupon > 0 ? "立即领券" : "立即购买" }}</div>
            <div class="orderNav_right_bottom" v-if="coupon_info.coupon > 0">省{{ coupon_info.coupon }}元</div>
          </div>
          <template v-else>
              <div v-if="aggregate_module_code==2" class="orderNav_right" @click="getCoupon" >
                <div class="orderNav_right_top">{{ coupon_info.coupon > 0 ? "立即领券" : "立即购买" }}</div>
                <div class="orderNav_right_bottom" v-if="coupon_info.coupon > 0">省{{ coupon_info.coupon }}元</div>
              </div>
              <div v-else class="orderNav_right">
                <wx-open-launch-weapp id="launch-btn" class="launch-btn" :appid="linkInfo.app_id" :username="linkInfo.app_source"
                  :path="linkInfo.link" @error="handleErrorFn" @launch="handleLaunchFn" @ready="readyFn">
                  <script type="text/wxtag-template">
                    <style>
                      .wx-btn {
                        border:none;
                        width: 100%;
                        height: 3.13rem;
                        line-height:3.13rem;
                        display: block;
                        color: #fff;
                        font-size: 1rem;
                        text-align: center;
                        border-radius: 0 1.56rem 1.56rem 0;
                        background-color: #e64a40;}</style>
                    <div> <button class="wx-btn">立即购买</button></div>
                  </script>
                </wx-open-launch-weapp>
              </div>
          </template>
    
        </div>
      </div>
    </template>

    <van-popup v-model="tiktok_popup" @close="closeTap" position="bottom" round :style="{ height: '18%' }">
      <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-around;">
        <div @click="show_popup" style="display: flex; flex-direction: column;">
          <img style="width: 2.7188rem; height: 2.7188rem;" src="../../../assets/images/TikTok/link_copy.png" alt />
          <span>复制抖口令</span>
        </div>
        <div style="display: flex; flex-direction: column;" @click="postShow">
          <img style="width: 2.7188rem; height: 2.7188rem;" src="../../../assets/images/TikTok/poster.png" alt />
          <span>海报</span>
        </div>
      </div>
    </van-popup>

    <van-overlay :show="show_dy_popup" @click="show_dy_popup = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="detail">
            <div class="flex">
              <img :src="detail.imgs && detail.imgs[0]"
                style="width: 2.75rem; height: 2.75rem; border-radius: 0.125rem;" alt />
              <span class="name" style="margin-left: 0.25rem; margin-right: 1.2rem; text-align: left;">{{
                detail.title
                }}</span>
            </div>
          </div>
          <div class="close" @click="show_dy_popup = false">
            <van-icon name="cross" />
          </div>
          <p class="link_dy">{{ dy_password }}</p>
          <div style="position: relative; bottom: 5%; left: 0; right: 0;" v-clipboard:copy="dy_password"
            v-clipboard:success="onCopy" v-clipboard:error="onError">
            <van-button style="width: 100%; border: none;" color="#F42121">一键复制，打开{{
              aggregate_module_code == 1 ? '抖音' : aggregate_module_code == 2 ? '淘宝' :
                aggregate_module_code == 3 ? '京东' : aggregate_module_code == 4 ? '拼多多' : '唯品会' }}APP下单</van-button>
          </div>
        </div>
      </div>
    </van-overlay>

    <!-- 授权引导 -->
    <van-overlay :show="authorization_popup" @click="authorization_popup = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="authorization-title">授权提示</div>
          <div class="authorization">
            <div>1、请点击下方复制链接</div>
            <div>2、打开手机浏览器，粘贴并访问</div>
            <div>3、按照页面上的指示完成授权</div>
            <div>4、授权后可点击刷新按钮刷新状态</div>
          </div>
          <div class="close" @click="authorization_popup = false">
            <van-icon name="cross" />
          </div>
          <div class="authorization-wrapper">
            <div class="refresh" @click="refresh">刷新</div>
            <div class="copy-link-button" v-clipboard:copy="authorization_link"
              v-clipboard:success="onCopy" v-clipboard:error="onError">复制链接
            </div>
          </div>
          <div class="authorization-tips" v-if="aggregate_module_code==2">注意：此授权有延迟，预计延迟30分钟左右请勿重复授权。</div>
        </div>
      </div>
    </van-overlay>

    <!-- 海报 -->
    <yz-goodsposter ref="RootPoster" v-model="posterShow" :posterData="isFrontCanvas ? posterImg : {}"
      :defaultImg="!isFrontCanvas ? posterImg : ''" plugin_name="tiktok-cps" @onEmit="closedPosterShow" :clear_dataURL="true"></yz-goodsposter>
    <!-- 客服 -->
    <cservice-popup :show="isShowChat" :cservice="cservice" :service_mobile="service_mobile"
      :service_QRcode="service_QRcode" @close="isShowChat = false"></cservice-popup>


    <van-popup v-model="share_flag" round position="bottom">
      <div class="share-box">
        <div class="share-tips">
          <span style="font-size: 1rem;font-weight: bold;
                    color: #00001C;">分享商品</span>
          <van-icon name="cross" @click="share_flag = false" />
        </div>
        <div class="share-post">
          <div class="flex-center" style="justify-content: space-between;">
            <div>
              <div class="share-txt">分享海报</div>
              <div class="share-txt-tips">可选择主图，点击生成海报！生成后长按保存！</div>
            </div>
            <div class="share-button" @click="post_handle">生成海报</div>
          </div>
          <div class="img-list" v-if="detail.imgs && detail.imgs.length !== 0">
            <div v-for="(item, i) in detail.imgs" :key="i"
              style="position: relative;width: 5rem;height:5rem;margin-right: 0.5rem;" @click="choose_poster(i)">
              <img :src="item" alt="">
              <div style="font-size: 20px;" class="round-right">
                <van-icon name="success" class="product-icon" :class="choose_index == i ? 'choose-current' : ''" />
              </div>
            </div>
          </div>
        </div>
        <div class="share-copy-box">
          <div class="share-copy-box-head">
            <div class="share-txt" style="margin-bottom: 0;">分享文案</div>
            <div class="share-button" v-clipboard:copy="radio == 1 ? share_link : radio == 2 ? short_link : long_link"
              v-clipboard:success="onCopy">复制文案</div>
          </div>
          <div style="padding:0 0.75rem 0.75rem;">
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1" checked-color="#F15353">详情地址</van-radio>
              <van-radio v-if="aggregate_module_code == 2 && is_authorize == 1" name="2"
                checked-color="#F15353">淘宝链接</van-radio>
              <template v-if="aggregate_module_code == 4 && is_authorize == 1">
                <van-radio name="2" checked-color="#F15353">拼多多短链接</van-radio>
                <van-radio name="3" checked-color="#F15353">拼多多长链接</van-radio>
              </template>
              <template v-if="aggregate_module_code == 3 || aggregate_module_code == 5">
                <van-radio name="2" checked-color="#F15353">{{
                  aggregate_module_code == 3 ? '京东' : '唯品会' }}短链接</van-radio>
                <van-radio name="3" checked-color="#F15353">{{
                  aggregate_module_code == 3 ? '京东' : '唯品会' }}长链接</van-radio>
              </template>
            </van-radio-group>
          </div>
          <div class="customer-popup-content" style="margin-bottom:0;">
            <p class="popup-tips-txt">{{ detail.name }}</p>
            <p class="popup-tips-txt">{{ aggregate_module_code == 2 ? '淘宝' :
              aggregate_module_code == 3 ? '京东' : aggregate_module_code == 4 ? '拼多多' : '唯品会' }}价：{{ detail.coupon_price
              }}元
            </p>
            <p class="popup-line"></p>
            <p style="text-align: left;">{{ radio == 1 ? share_link : radio == 2 ? short_link : long_link }}</p>
          </div>

        </div>
        <div class="share-bottom">
          <div class="share-round">1</div><span class="color-6E6E79 fz-24">生成海报</span>
          <div class="line-box"><span></span><span></span><span></span></div>
          <div class="share-round">2</div><span class="color-6E6E79 fz-24">保存海报到手机相册</span>
          <div class="line-box"><span></span><span></span><span></span></div>
          <div class="share-round">3</div><span class="color-6E6E79 fz-24">复制文案</span><br />
        </div>
        <div class="color-6E6E79 fz-24" style="text-align: center;">可分享到朋友圈、群、好友等场景！</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import GoodsSwiper from "../../../components/goods/children/goods_swiper";
import cservicePopup from "/src/components/goods/children/plugin/cservicePopup"; //客服组件
import goodsLabel from "../../../components/goods/children/goodsLabel"; //单单有喜组件
import { tabScroll } from "/src/components/goods/children/mixin/tabScroll";
import { Toast } from "vant";
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
export default {
  components: { GoodsSwiper, yzGoodsposter, cservicePopup, goodsLabel },
  mixins: [tabScroll], //计算顶部导航
  data() {
    return {
      coupon_click_url:"",
      mobile_url:"",
      short_link:"",
      long_link:"",
      schema_url: "",
      coupon_info: {},
      imgHost: "",
      isWeixin: false,//是否微信环境
      linkInfo: {
        appid:"",
        app_source: "",
        link: "",
      },
      share_link: window.location.href,
      choose_index: 0,
      radio: "1",
      share_flag: false,
      is_authorize: null,//1-已授权、2-未授权
      authorization_popup: false,
      authorization_link: "",
      aggregate_module_code: 1,
      showContent: true,
      show_dy_popup: false,

      copy_err: false,
      hoet: false,
      dy_password: "",
      goods_id: "",
      detail: {},
      currentClass: 0,
      showPageB: false,
      scroll: "",

      cservice: "",
      service_mobile: "",
      service_QRcode: "",

      dy_deeplink: "",
      show_page: false,

      is_handleScroll: 0, // 计算保存页面高度
      isShowChat: false,
      tiktok_popup: false,
      posterShow: false,
      posterImg: null,
      isFrontCanvas: true //是否前端控制生成海报，false为后端生成
    };
  },
  deactivated() {
    window.removeEventListener("scroll", this.throttleFn);
  },
  activated() {
    this.imgHost = `${window.location.origin}/static/local/tiktok-cps/jiangli.png`;
    let ua = navigator.userAgent.toLowerCase();
    let isWXWork = ua.match(/wxwork/i) == 'wxwork';
    this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger';
    this.showContent = true;
    this.authorization_popup = false;
    this.dy_deeplink = "";
    this.goods_id = this.$route.params.id;
    this.copy_err = false;
    this.show_page = false;
    this.aggregate_module_code = this.$route.params.aggregate_module_code;
    this.getData();
    this.handleScroll();
  },
  methods: {
    closedPosterShow(){
      console.log('隐藏海拔哦了=======');
    },
    readyFn(e) {
      console.log('readyFn', e.detail);
    },

    handleErrorFn(e) {
      if(this.aggregate_module_code == 3){
        window.location.href = this.short_link
      }else if(this.aggregate_module_code==4){
        window.location.href = this.schema_url;
      }else if(this.aggregate_module_code == 5){
        window.location.href = this.schema_url;
      }
      console.log('fail', e.detail);
    },

    handleLaunchFn(e) {
      console.log('success');
    },
    get_poster_image_handle(json) {
      $http
        .get('plugin.tiktok-cps.api.poster.get-poster', json, "")
        .then(response => {
          if (response.result == 1) {
            // isFrontCanvas 是否需要前端生成海报
            this.posterImg = this.isFrontCanvas ? response.data : `${response.data.image_url}?${Date.now()}`;
            this.posterShow = true;
          } else {
            this.posterShow = false;
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(error => {
          // toastPoster.clear();
          console.log(error);
        });
    },

    //根据不同图片生成海报
    post_handle() {
      let Jons = {
        aggregate_module_code: this.aggregate_module_code,
        id: this.$route.params.id,
        cover_url: this.detail.imgs[this.choose_index],
      };
      if (this.aggregate_module_code == 2) {
        Jons.cos_amount = this.$route.params.cos_amount;
        Jons.cos_ratio = this.$route.params.cos_ratio;
      }
      this.get_poster_image_handle(Jons)
    },
    choose_poster(index) {
      this.choose_index = index;
    },

    toShowContent() {
      this.showContent = !this.showContent;
    },
    gotoUrl(name, params = {}) {
      this.$router.push(this.fun.getUrl(name, params));
    },
    shareWeixin() {
      this.share_flag = true;
    },
    getCoupon() {
      if (this.fun.isCPS()) {
        if (this.aggregate_module_code == 2|| (this.aggregate_module_code == 4&&this.is_authorize == 2)) {//淘宝、拼多多
          if (this.is_authorize == 2) {//未授权
            this.authorization_popup = true;
          } else {
            if (this.coupon_info.coupon > 0) {
              this.dy_password = this.coupon_info.long_coupon_tpwd;
              this.show_dy_popup = true;
            } else {
              if (this.aggregate_module_code == 4) {
                window.location.href = this.schema_url;
              } else {
                window.location.href = this.short_link;
              }
            }
          }
        } else if (this.aggregate_module_code == 3) {//京东
          window.location.href = this.short_link
          return;
        }
        let json = {
          deep_link: this.detail.deep_link,
          coupon_click_url:this.short_link,
          item_id:this.$route.params.id
        }
        if(this.aggregate_module_code==4){
          json = {
            deep_link : this.schema_url,
            coupon_click_url:this.mobile_url,
            item_id:this.$route.params.id
          };
        }
        try {
          if (this.fun.isIosOrAndroid() === "ios") {
            // if (coupon_click_url.indexOf('taobao') > -1) {
            //   IOStoTB(JSON.stringify(json))
            // } else 
            if (this.mobile_url.indexOf("yangkeduo") > -1) {
              IOStoPDD(JSON.stringify({deep_link:this.schema_url, coupon_click_url:this.short_link, item_id:this.$route.params.id}))
            } else{
              window.location.href = this.coupon_click_url;
            }
            // else {
            //   IOStoJD(JSON.stringify(json))
            // }
          } else {
            // if (coupon_click_url.indexOf('taobao') > -1) {
            //   androidTB(this.detail.deep_link, this.detail.coupon_click_url, this.detail.item_id)
            // } else
            console.log(this.aggregate_module_code,'this.aggregate_module_code===');
            if(this.aggregate_module_code==4){
              androidToPDD(this.schema_url, this.short_link, this.$route.params.id)
            }else{
              androidVip(this.schema_url, this.short_link, this.$route.params.id)
            }
            // if (this.mobile_url.indexOf("yangkeduo") > -1) {
            
            // }else {
            
            // }
            //  else {
            //   androidToJD(this.detail.deep_link, this.detail.coupon_click_url, this.detail.item_id)
            // }
          }
        } catch (error) {
          if(this.is_authorize==2){
            this.authorization_popup = true;
            return;
          }
          if(this.aggregate_module_code == 4){
            try {
               window.location.href = this.schema_url;
            } catch (error) {
              window.location.href = this.mobile_url;
            }
          }else{
            window.location.href = this.coupon_click_url;
          }
        }

      } else {
        if (this.aggregate_module_code == 2 || this.aggregate_module_code == 4) {//淘宝、拼多多
          if (this.is_authorize == 2) {//未授权
            this.authorization_popup = true;
          } else {
  
            if (!this.isWeixin) {
              if (this.coupon_info.coupon > 0) {
                this.dy_password = this.coupon_info.long_coupon_tpwd;
                this.show_dy_popup = true;
              } else {
                if (this.aggregate_module_code == 4) {
                  if(this.fun.getWebEnv()=='5'){
                    window.location.href = this.mobile_url;
                  }else{
                    window.location.href = this.schema_url;
                  }
                } else {
                  window.location.href = this.short_link;
                }
              }
            } else {
              if (this.aggregate_module_code==2&&this.coupon_info.coupon * 1 > 0) {
                this.dy_password = this.coupon_info.long_coupon_tpwd;
                this.show_dy_popup = true;
                return;
              } 
              if (this.aggregate_module_code == 4) {
                window.location.href = this.mobile_url;
              } else {
                window.location.href = this.short_link;
              }
            }
          }
        } else if (this.aggregate_module_code == 3) { //京东
          window.location.href = this.short_link
        }
        else if (this.aggregate_module_code == 5) {//唯品会
          if(this.fun.getWebEnv()=='5'){
            window.location.href = this.coupon_click_url;
          }else{
            window.location.href = this.schema_url;
          }
        }
      }

    },
    toTikTok() {
      if (this.fun.isCPS()) {
        let json = { dy_deeplink: this.dy_deeplink };
        if (this.fun.isIosOrAndroid() === "ios") {
          IOStoTikTok(JSON.stringify(json))
        } else {
          androidToTikTok(this.dy_deeplink)
        }
      } else {
        this.show_dy_popup = true
      }
    },
    show_popup() {
      this.show_dy_popup = true;
      this.tiktok_popup = false;
    },
    // 监听滚动条
    handleScroll() {
      window.addEventListener("scroll", this.windowScroll);
      this.$nextTick(() => {
        document.documentElement.scrollTop = 0;
      });
    },
    windowScroll() {
      let scroll = document.documentElement && document.documentElement.scrollTop;
      this.is_handleScroll = scroll;
      this.scroll = scroll;
    },
    getDetailData(index, tag) {
      // 商品详情处理
      if (tag) {
        this.$nextTick(() => {
          let jump = document.getElementsByClassName("section");
          console.log(jump);
          setTimeout(() => {
            // 获取需要滚动的距离
            let total = jump[index].offsetTop - 50;
            // Chrome
            document.body.scrollTop = total;
            // Firefox
            document.documentElement.scrollTop = total;
            // Safari
            window.pageYOffset = total;
          }, 200);
        });
      }
    },
    slider() {
      let that = this;
      window.onscroll = function () {
        var top = document.documentElement.scrollTop || document.body.scrollTop;

        that.hoet = top <= 40 ? false : true;
        that.btnFlag = top > 120 ? true : false;

        //滑动到底部禁止反弹
        if (document.documentElement.scrollHeight == document.documentElement.clientHeight + top) {
          //alert("Touch_Buttom!");
          document.addEventListener("touchstart", this.move, false);
          document.addEventListener("touchmove", this.move, false);
        }
      };
    },
    // 群活码跳转
    toGroupCode() {
      if (this.detail.group_code.jump_mode === "home") {
        this.$router.push(this.fun.getUrl("groupCode"));
      } else if (this.detail.group_code.code_url) {
        window.location.href = this.detail.group_code.code_url;
      }
    },
    onCopy(e) {
      if (this.aggregate_module_code !== 1) {//淘宝
        this.$toast('复制成功')
      } else {
        Toast({
          message: "口令已复制，打开抖音app下单！",
          position: "bottom",
          duration: 1000
        });
        this.show_dy_popup = false;
        this.tiktok_popup = false;
      }

    },
    onError(e) {
      this.copy_err = true;
      console.log('失败====');
      if (this.detail.detail_url || this.goods_id) {
        this.getTikTokCps(this.aggregate_module_code == 1 ? this.detail.detail_url : this.goods_id);
      }
    },
    get_taobao_authorize() {
      if (this.aggregate_module_code == 2) {//淘宝
        let json = {}
        if(this.fun.getWebEnv()=='5'){
          json.view = 'web';
        }else{
          json.view = 'wap';
        }
        $http.get("plugin.tiktok-cps.api.goods.getIsTaoBaoAuthorize",json).then(res => {
          this.is_authorize = res.data.is_authorize;
          if (res.data.is_authorize == 2) {//未授权
            let _json = {}
            if(this.fun.getWebEnv()=='5'){
              _json.view = 'web';
            }else{
              _json.view = 'wap';
            }
            $http.get('plugin.tiktok-cps.api.goods.taoBaoAuthorize',json).then(resdata => {
              if (resdata.result) {
                this.authorization_link = resdata.data;
              }
            })
          }
        })
      } else {//拼多多
        this.is_authorize = 2;
        $http.get('plugin.tiktok-cps.api.goods.pddPromUrlGenerate').then(res => {
          if (res.result) {
            if(this.fun.getWebEnv()=='1'){
              window.location.href = res.data.url_list[0].mobile_url;
            }else{
              this.authorization_link = res.data.url_list[0].mobile_url;
            }

          }
        })
      }

    },
    refresh(){
      $http.get("plugin.tiktok-cps.api.goods.tranfer-link", { detail_url:this.goods_id, aggregate_module_code: this.aggregate_module_code }, 'loading').then(res => {
        if (res.result == 0) {
          this.dy_password = '';
          this.dy_deeplink = '';
          this.show_page = true;
          if (res.data.code == 2) {
            this.get_taobao_authorize();
          }
          this.$toast(res.msg);
          return
        }
        this.is_authorize = 1;
        this.show_page = true;
        let code = this.aggregate_module_code;
        if (code == 2) {//淘宝
          this.short_link = res.data.item_url;
          this.coupon_info = res.data;
        } else if (code == 4) {//拼多多
          this.linkInfo.app_id = res.data.we_app_info.app_id;
          this.linkInfo.app_source = res.data.we_app_info.user_name;
          this.linkInfo.link = res.data.we_app_info.page_path;
          this.short_link = res.data.short_url;
          this.long_link = res.data.url;
          this.schema_url = res.data.schema_url;
          this.mobile_url = res.data.mobile_url;
        } 
     
      });
    },
    getTikTokCps(detail_url) {
      if (detail_url == "") {
        return;
      }
      $http.get("plugin.tiktok-cps.api.goods.tranfer-link", { detail_url, aggregate_module_code: this.aggregate_module_code }, 'loading').then(res => {
        if (res.result == 0) {
          this.dy_password = '';
          this.dy_deeplink = '';
          this.show_page = true;
          if (res.data.code == 2) {
            this.get_taobao_authorize();
          }
          return
        }
        this.is_authorize = 1;
        this.show_page = true;
        let code = this.aggregate_module_code;
        if (code == 1) {
          this.dy_password = res.data.dy_password;
          this.dy_deeplink = res.data.dy_deeplink;
        } else if (code == 2) {//淘宝
          this.short_link = res.data.coupon_click_url;
          this.coupon_info = res.data;
        } else if (code == 3) {//京东
          this.linkInfo.app_id = 'wx91d27dbf599dff74';
          this.linkInfo.link = 'pages/union/proxy/proxy?spreadUrl=' + res.data.shortURL;
          this.short_link = res.data.shortURL;
          this.long_link = res.data.clickURL;
        } else if (code == 4) {//拼多多
          this.linkInfo.app_id = res.data.we_app_info.app_id;
          this.linkInfo.app_source = res.data.we_app_info.user_name;
          this.linkInfo.link = res.data.we_app_info.page_path;
          this.short_link = res.data.short_url;
          this.long_link = res.data.url;
          this.schema_url = res.data.schema_url;
          this.mobile_url = res.data.mobile_url;
        } else {//唯品会
          this.linkInfo.app_id = 'wxe9714e742209d35f';
          this.linkInfo.link = res.data.vipWxUrl;
          this.short_link = res.data.url;
          this.long_link = res.data.longUrl;
          this.schema_url = res.data.deeplinkUrl;
          this.coupon_click_url = res.data.url;
        }
        if (this.copy_err) {
          this.onCopy();
        }
      });
    },
    //获取单张海报
    postShow() {
      if (!this.fun.isTextEmpty(this.posterImg)) {
        this.posterShow = true;
      } else {
        let Jons = {};
        this.isFrontCanvas = false;
        this.isFrontCanvas = true;
        Jons.id = this.$route.params.id;
        this.get_poster_image_handle();
      }
    },
    ShowTiktokPoupup() {
      this.tiktok_popup = true;
    },
    closeTap() {
      this.tiktok_popup = false;
    },
    clickChat() {
      let setServicePlugin = this.fun.isTextEmpty(this.service_mobile) && this.fun.isTextEmpty(this.service_QRcode);
      if (this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        return this.$toast("抱歉，暂未设置客服信息");
      }
      if (!this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        //只设置了客服链接，直接跳转
        if (this.cservice && this.cservice.indexOf("chatWindow") >= 0) {
          window.location.href = this.cservice + "&goods_id=" + this.goods_id;
        } else {
          window.location.href = this.cservice;
        }
        return;
      }
      this.isShowChat = true;

    },
    gotoHome() {
      this.$router.push(this.fun.getUrl("TikTokCps", {}));
    },
    gotoMember() {
      this.$router.push(this.fun.getUrl("member", {}));
    },
    goto() {
      this.$router.go(-1);
    },
    async getData() {
      let json = { goods_id: this.goods_id, aggregate_module_code: this.aggregate_module_code };
      if (this.aggregate_module_code == 2) {
        json.cos_amount = this.$route.params.cos_amount;
        json.cos_ratio = this.$route.params.cos_ratio;
      }
      let { result, msg, data } = await $http.get("plugin.tiktok-cps.api.goods.good-detail", json);
      if (result == 0) {
        return this.$toast(msg);
      }
      if (data.cservice) {
        this.cservice = data.cservice.cservice;
        this.service_mobile = data.cservice.service_mobile;
        this.service_QRcode = data.cservice.service_QRcode;
      }
      if (this.aggregate_module_code == 1) {
        this.detail = data || {};
      } else if (this.aggregate_module_code == 2) {//淘宝
        this.detail = data[0];
        this.detail.imgs = data[0].small_images.string;
        this.detail.month_sales = data[0].volume;
        this.detail.sales = null;
        this.detail.kol_num = null;
        this.detail.detail_pictures = [data[0].pict_url];
      } else if (this.aggregate_module_code == 3) {//京东
        this.detail = data[0];
        this.detail.title = data[0].skuName;
        let arr = []
        data[0].imageInfo.imageList.forEach(item => {
          arr.push(item.url)
        })
        this.detail.month_sales = data[0].volume;
        this.detail.sales = null;
        this.detail.kol_num = null;
        this.detail.imgs = arr;
        if (data[0].detailImages) {
          let arr1 = data[0].detailImages.split(",")
          this.detail.detail_pictures = arr1;
        }
      } else if (this.aggregate_module_code == 4) {//拼多多
        this.detail = data[0];
        this.detail.imgs = data[0].goods_gallery_urls;
        this.detail.month_sales = data[0].mall_coupon_total_quantity
        this.detail.detail_pictures = [data[0].goods_thumbnail_url];
      } else if (this.aggregate_module_code == 5) {//唯品会
        this.detail = data;
        this.detail.imgs = data.goodsCarouselPictures;
        this.detail.detail_pictures = data.goodsDetailPictures
      }
      if (this.$route.params.aggregate_module_code == 3) {//京东-获取价格
        $http.get('plugin.tiktok-cps.api.goods.good-list', { aggregate_module_code: 3, itemIds: this.$route.params.id }).then(res => {
          if (res.result) {
            let data = res.data.data[0];
            this.$set(this.detail,'coupon_price',data.coupon_price)
            this.$set(this.detail,'price',data.price)
            this.$set(this.detail,'month_sales',data.inOrderCount30Days)
            if (!this.detail.detail_pictures) {
              this.$set(this.detail,'detail_pictures',[data.cover])
            }
            this.detail.rewards = data.rewards;
          }
        })
      }

      this.slider();
      this.getTikTokCps(this.aggregate_module_code == 1 ? data.detail_url : this.goods_id);
    }
  },
  watch: {
    is_handleScroll() {
      this.loadSroll();
    }
  }
};
</script>

<style lang='scss' scoped>
.authorization-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .9375rem;
  .copy-link-button{
      width: 6.6875rem;
      font-size: 0.85rem;font-weight: bold;
      background-color: #F15353;
      height: 2.5rem;
      border-radius: .25rem;
      color:#FFFFFF;
      text-align: center;
      margin-left: .25rem;
      line-height: 2.5rem;
  }
  .refresh{
    width: 6.6875rem;
    height: 2.5rem;
    margin-right: .25rem;
    border-radius: .25rem;
    text-align: center;
    line-height: 2.5rem;
    color: rgba(16,16,16,0.53);
    font-size: 0.85rem;font-weight: bold;
    border: 1px solid #BBBBBB;
  }
}

#launch-btn {
  width: 100%;
  height: 100%;
}

.share-box {
  padding: 1.5rem .75rem 2.25rem;
  box-sizing: border-box;
  background-color: #F5F5F5;
  height: 100%;

  .img-list {
    display: flex;
    align-items: center;
    margin-top: .75rem;
    overflow: auto;
  }


  .fz-24 {
    font-size: .75rem;
  }

  .color-6E6E79 {
    color: #6E6E79;
  }



  .line-box {
    width: 0.9375rem;
    margin: 0 .25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      width: 0.25rem;
      height: 1px;
      background-color: #AAAAB3;
    }
  }

  .share-bottom {
    display: flex;
    flex-wrap: wrap;
    padding: 0 .875rem;
  }

  .share-round {
    width: 1.25rem;
    border-radius: 50%;
    height: 1.25rem;
    margin-right: .1875rem;
    border: 1px solid #999999;
    font-size: .75rem;
  }

  .popup-line {
    width: 9.375rem;
    height: 1px;
    border-bottom: #00001C dotted;
    margin: 0.625rem 0;
  }

  .popup-tips-txt {
    text-align: left;
    font-size: 0.8125rem;
    color: #00001C;
  }

  .customer-popup-content {
    margin: 0 .9375rem 1.25rem;
    max-height: 10.7813rem;
    overflow-y: scroll;
    padding: 0.7813rem 0.75rem;
    background: #F5F5F5;
    border-radius: 0.5rem;
    word-wrap: break-word;
  }


  .share-txt {
    font-weight: bold;
    font-size: 0.9375rem;
    color: #00001C;
    text-align: left;
    line-height: 1;
    margin-bottom: .4688rem;
  }

  .share-txt-tips {
    font-weight: 400;
    font-size: 0.75rem;
    color: #6E6E79;
    line-height: 1;
    text-align: left;
  }

  .share-copy-box-head {
    padding: .75rem .625rem .125rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
  }

  .share-copy-box {
    margin: .625rem 0;
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding-bottom: .75rem;
  }

  .round-right {
    position: absolute;
    right: .25rem;
    top: .25rem;
  }


  .choose-current {
    border-color: rgb(241, 83, 83) !important;
    background-color: rgb(241, 83, 83) !important;
    color: #fff !important;
  }

  .product-icon {
    display: block;
    box-sizing: border-box;
    width: 1.25em;
    height: 1.25em;
    color: transparent;
    font-size: 0.8em;
    line-height: 1.25;
    text-align: center;
    border-radius: 100%;
    border: 1px solid #c8c9cc;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-property: color, border-color, background-color;
    transition-property: color, border-color, background-color;
  }


  .flex-center {
    display: flex;
    align-items: center;
  }

  .mb-24 {
    margin-bottom: .75rem;
  }


  .share-button {
    width: 4.625rem;
    height: 1.75rem;
    line-height: 1.75rem;
    text-align: center;
    background: #F15353;
    border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #FFFFFF;
  }

  .share-txt {
    font-weight: bold;
    font-size: 0.9375rem;
    color: #00001C;
    text-align: left;
    line-height: 1;
    margin-bottom: .4688rem;
  }

  .share-txt-tips {
    font-weight: 400;
    font-size: 0.75rem;
    color: #6E6E79;
    line-height: 1;
    text-align: left;
  }

  .share-post {

    height: 9.5938rem;
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: .9375rem .625rem .75rem;
  }

  .share-tips {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    padding: 0 .1875rem .9375rem;
  }

  img {
    width: 5rem;
    height: 5rem;
    margin: 0 .5rem 0 0;
    border-radius: 0.5rem;
  }
}

.bc-f15353 {
  background-color: #F15353 !important;
}

.authorization-tips {
  color: rgba(16, 16, 16, 0.53);
  font-size: .75rem;
  margin-top: .75rem;
  text-align: left;
}

.authorization-title {
  text-align: center;
  margin-bottom: .9375rem;
  font-size: 1.125rem;
  color: #101010;
}

.authorization {
  div {
    text-align: left;
    font-size: .875rem;
    color: #00001C;
    margin-bottom: .75rem;
  }
}

.reward-box {
  margin: .625rem .75rem;
  background: linear-gradient(180deg, #FFEAC8 0%, #FFFFFF 100%);
  border-radius: 0.75rem;
  border: 1px solid #FFFFFF;

  .reward-content {
    border-radius: .5rem;
    background: #fff;
    padding: .75rem .375rem .9375rem;
    box-sizing: border-box;
    line-height: 1;
    margin: 0 .3125rem 0;
  }

  .reward-content-left {
    min-width: 3.25rem;
    margin-right: .7188rem;
    font-weight: 500;
    font-size: .8125rem;
    color: #00001c;
    text-align: left;
  }

  .flex-center {
    display: flex;
    align-items: center;
  }

  .mb-24 {
    margin-bottom: .75rem;
  }

  &-content {
    border-radius: 0.5rem;
    background: #FFFFFF;
    padding: .75rem .375rem .9375rem;
    box-sizing: border-box;
    line-height: 1;
    margin: 0 .3125rem 0;
  }

  &-content-left {
    min-width: 3.25rem;
    margin-right: .7188rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #00001C;
    text-align: left;
  }

  .reward-title {
    display: flex;
    align-items: center;
    height: 2.75rem;
    margin-left: 0.875rem;
    position: relative;
    font-size: .9375rem;

    img {
      position: absolute;
      top: 0;
      right: .75rem;
      width: 1.8438rem;
    }

    &-right {
      font-weight: 400;
      font-size: 0.75rem;
      color: #672000;
      line-height: 1;
    }
  }

  .reward-tips {
    font-weight: bold;
    font-size: 0.9375rem;
    color: #672000;
    line-height: 1;
    margin-right: .0938rem;
  }
}

.w375 {
  width: 375px !important;
}

.line {
  background: #fafafa;
  height: 0.31rem;
  width: 100%;
}

.orderNav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4.38rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.63rem 0 0.8rem;
  background: #fff;

  .leftNav {
    display: flex;
    margin-right: 0.5rem;

    .leftNav_min_right {
      margin-left: 1.5rem;
    }

    .leftNav_min {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #777;

      .icon-fontclass-pingfen {
        color: #aaa;
        font-size: 1.3rem;
      }

      img {
        width: 1.13rem;
        height: 1.13rem;
      }
    }
  }

  .btnAR {
    flex: 1;
    display: flex;

    .orderNav_right {
      flex: 1;
      /* width: 8.13rem; */
      height: 3.13rem;
      background-color: #e64a40;
      border-radius: 0 1.56rem 1.56rem 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      color: #fff;

      .orderNav_right_bottom {
        font-size: 0.75rem;
      }

      .orderNav_right_top {
        font-size: 1rem;
      }
    }

    .orderNav_left {
      flex: 1;

      /* width: 8.13rem; */
      height: 3.13rem;
      background-color: #e9c69a;
      border-radius: 1.56rem 0 0 1.56rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      .orderNav_left_bottom {
        color: #605446;
        font-size: 0.75rem;
      }

      .orderNav_left_top {
        font-size: 1rem;
        color: #272727;
      }
    }
  }
}

.describe {
  background-color: white;
  padding-bottom: 5.31rem;
  margin: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  overflow: hidden;

  .describe_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.59rem 0.63rem;

    span {
      font-size: 1rem;
    }

    .describe_top_r {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 0.88rem;
    }
  }

  .content {
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
  }
}

.storeIn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: .625rem .75rem;
  background-color: #fff;
  border-radius: .5rem;
  padding: .625rem;

  .store_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    .evaluate {
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.75rem;
      color: #777;
    }

    .storeName {
      text-align: left;
      font-size: 14px;
      margin-bottom: 0.3rem;

      .btn {
        padding: 0.19rem 0.47rem;
        background-color: #f0f0f0;
        color: #777;
        font-size: 0.63rem;
        border-radius: 0.5rem;
      }
    }
  }

  .store_left {
    margin-right: 0.63rem;
    width: 2.75rem;
    height: 2.75rem;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.couponBox {
  margin: .625rem .75rem;
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cps/xqyhq.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 3.5rem;
  margin-top: 1.3rem;
  display: flex;
  align-items: center;
  color: #fee3b7;
  padding-left: 0.59rem;
  font-size: 0.75rem;
  position: relative;

  .time {
    text-align: left;
    font-size: 0.63rem;
    color: #afa89d;
  }

  .couponRight {
    position: absolute;
    right: 1.25rem;
    top: 0.88rem;
    width: 5.13rem;
    height: 1.75rem;
    background-image: linear-gradient(0deg, #eccb97 0%, #fee3b7 100%);
    border-radius: 0.88rem;
    color: #39342e;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dor {
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.8rem;
  }

  .couponBox_price {
    font-size: 1.75rem;
  }
}

.contenBox {
  margin: .625rem .75rem;
  border-radius: .5rem;
  padding: 0 .75rem;
  background-color: #fff;





  // 商品名称
  .goodsDetail {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .goodsDetail_left {
      flex: 1;
      font-size: 1rem;
      color: #272727;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-align: left;

      .shopType {
        margin-right: 0.3rem;
        background: #bb3e26;
        padding: 2px 3px;
        color: #fff;
        text-align: center;
        line-height: 1.2rem;
        border-radius: 0.35rem;
        font-size: 12px;
        display: inline-grid;
        box-sizing: border-box;
      }
    }

    .goodsDetail_right {
      padding: 3px;
      margin-left: 1.16rem;
      width: 4.38rem;
      background-color: #fee3b7;
      border-radius: 0.31rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      font-size: 10px;
      word-break: break-all;
    }
  }

  // 价格
  .goodsPrice {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.7rem;

    .goodsPrice_right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 0.5rem;
      font-size: 0.75rem;
      color: #999;
    }

    .goodsPrice_left {
      color: #e64a40;
      margin-right: 0.75rem;

      .goodsPrice_left_price {
        font-size: 2.38rem;
      }
    }

    .goodsPrice_left_row {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 0.75rem;
      color: #e64a40;

      span {
        text-align: left;
      }

      .original {
        text-decoration: line-through;
        color: #999;
      }
    }
  }
}

.button {
  flex: 1;
  padding: 0.4063rem 0;
  background: #ff6238;
  flex-shrink: 0;
}

.link_dy {
  margin-top: 1.0625rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  word-break: break-all;
  text-align: left;
  color: #999;
  font-size: 0.75rem;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.close {
  position: absolute;
  right: 5%;
  top: 5%;
}

.block {
  position: relative;
  width: 17.5rem;
  border-radius: 0.25rem;
  background-color: #fff;
  padding: 1.25rem 0.625rem;
}

.foot_pc {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.tiktok-detail {
  padding-bottom: 5rem;
  overflow: hidden;

  #navTab.hoet {
    display: flex;
    justify-content: space-around;
  }

  #navTab {
    position: fixed;
    z-index: 999;
    width: 14rem;
    left: 50%;
    margin-left: -7rem;
    display: none;
    background: #fdfdfd;

    a {
      padding: 0 0.8rem;
      height: 2.25rem;
      line-height: 2.25rem;
    }

    .current {
      color: #1f1f1f;
      font-weight: bold;
      border-bottom: 0.1875rem solid #f15353;
    }
  }

  .hoet {
    background-color: rgba(253, 253, 253, 1) !important;
    color: #1f1f1f !important;
  }

  .poster {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 20.4rem;
    top: 65%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .good-detail {
    text-align: center;
    background: #fff;
    font-size: 0.875rem;
    padding: 0.625rem 0;
    position: relative;

    .left-line {
      position: absolute;
      width: 3.125rem;
      height: 1px;
      background: #ccc;
      top: 50%;
      left: 20%;
    }

    .right-line {
      position: absolute;
      width: 3.125rem;
      height: 1px;
      background: #ccc;
      top: 50%;
      right: 20%;
    }
  }

  .tiktok-person {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
  }

  .group_code {
    width: 100%;
    background: #fff;
    padding: 0.625rem;
  }

  .item {
    background: #fff;
    text-align: left;
    border-radius: 0.3125rem;
    padding: 0.6rem;
    margin: 0.6rem;
  }

  .tiktok-cps {
    margin: 0.6rem;
    border-radius: 0.3125rem;
    padding: 0.6rem;
    background-color: #fff;

    .tiktok-tips {
      background-color: #000;
      color: #fff;
      border-radius: 0.3125rem;
      padding: 0.0938rem 0.25rem;
      font-size: 0.75rem;
      margin-right: 0.1875rem;
    }

    .tiktok-cps-title {
      text-align: left;
    }

    .tiktok-goods-info {
      margin-top: 0.75rem;
      display: flex;
      justify-content: space-between;
    }

    .tiktok-cps-sell-good {
      margin: 0.75rem 0;
      padding: 0.25rem 0.5rem;
      width: 100%;
      border-radius: 0.25rem;
      background: #f6f6f6;
      display: flex;
      align-items: center;
    }
  }

  .foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #fff;
    align-items: center;
  }

  #member {
    padding: 0.3125rem;
    width: 1.6rem;
    position: fixed;
    z-index: 2;
    box-sizing: content-box;
    right: 0;
  }

  #hoid {
    padding: 0.3125rem;
    width: 100%;
    position: fixed;
    z-index: 2;
    display: flex;
    justify-content: space-between;
  }

  .back {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    text-indent: 0;
    line-height: 1.7rem;
    overflow: hidden;
  }

  /* 群活码 */
  .group-code {
    display: flex;
    align-items: center;
    text-align: left;
    background-color: #fff;
    padding: 0.6rem;
    border-radius: 0.3125rem;
    margin: 0.6rem;

    .group-code-face {
      width: 2.5rem;
      height: 2.5rem;

      img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
      }
    }

    .group-code-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 2rem;
      padding-right: 1rem;
      padding-left: 0.5rem;
      line-height: 1.125rem;

      .group-code-name {
        font-size: 13px;
        font-weight: bold;
        color: #353535;
      }

      .group-code-desc {
        font-size: 10px;
        color: #6c6c6c;
      }
    }

    .group-code-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.75rem;
      height: 1.5rem;
      line-height: 1.5rem;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      background-color: #ff9600;
      border-radius: 0.75rem;
    }
  }
}
</style>